<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LULEME</title>
    <link rel="stylesheet" href="./src/idangerous.swiper.css">
    <style>
        @font-face { font-family: siyuanheiti-font; src: url('./siyuanheiti-font.otf'); }
        html {
            scroll-behavior: smooth;
            font-family: siyuanheiti-font;
        }

        body,
        html,
        div,
        p {
            padding: 0;
            margin: 0;
        }
        .content {
            max-width: 600px;
            margin: 0 auto;
        }

        .swiper-container {
            width: 100%;
            height: 280px;
            color: #fff;
            text-align: center;
        }

        .swiper-slide .title {
            font-style: italic;
            font-size: 42px;
            margin-top: 80px;
            margin-bottom: 0;
            line-height: 45px;
        }

        .swiper-slide p {
            font-style: italic;
            font-size: 25px;
        }

        .swiper-slide img {
            width: 100%;
        }

        .pagination {
            position: absolute;
            z-index: 20;
            left: 50%;
            transform: translateX(-50%);
            bottom: 20px;
        }

        .swiper-pagination-switch {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 8px;
            background: #555;
            margin-right: 5px;
            opacity: 0.8;
            border: 1px solid #fff;
            cursor: pointer;
        }

        .swiper-active-switch {
            background: #fff;
        }

        .swiper-dynamic-links {
            text-align: center;
        }

        .swiper-dynamic-links a {
            display: inline-block;
            padding: 5px;
            border-radius: 3px;
            border: 1px solid #ccc;
            margin: 5px;
            font-size: 12px;
            text-decoration: none;
            color: #333;
            background: #eee;
        }
        #mgq {
            opacity: 0;
            border-radius: 8px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-bottom: 170px;
        }
        #gq {
            display: none;
            text-align: center;
        }
        #gq img {
            margin-top: 50px;
            width: 150px;
        }
        #gq p {
            margin-top: 20px;
        }
        .flex-cont {
            height: auto;
            background-color: #fff;
            overflow-y: auto;
            border-radius: 16px 16px 0 0;
            position: relative;
            top: -16px;
            z-index: 99;
            padding: 0 6px;
        }
        .flex {
            display: flex;
            justify-content: space-between;
            margin-top: 12px;
            padding: 0 6px;
        }
        
        .hh{
            white-space:pre-wrap
        }
        #remark {
            max-width: 60%;
        }
        #q14 {
            padding: 14px;
            text-align: center;
        }
        .q15 {
            text-align: center;
            font-size: 18px;
        }
        #q15 {
            background-color: #fff;
            outline: none;
            border: 1px solid #333;
            border-radius: 4px;
            padding: 16px 0px;
            width: 100%;
            font-size: 22px;
        }
        .q17 {
            text-align: center;
            font-size: 18px;
        }
        #q17 {
            background-color: #fff;
            outline: none;
            color: #FF9D1A;
            border: 1px solid #FF9D1A;
            border-radius: 4px;
            padding: 6px 0px;
            width: 50%;
            font-size: 14px;
        }
        #mgq2 {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            height: auto;
            width: 100%;
            padding: 10px 10px 30px 10px;
            box-sizing: border-box;
            background-color: #fff;
            z-index: 999;
        }
        .remark {
            background-color: #efefef;
            border-radius: 4px;
            padding: 12px 6px;
        }
        .tab2 {
            background-color: #efefef;
            border-radius: 8px;
            padding-top: 2px;
            padding-bottom: 12px;
            margin-top: 12px;
        }
        .price-cont {
            background-color: #F9F0E1;
            border-radius: 12px;
            margin-top: 12px;
            padding: 6px;
        }
        #currency_name {
            font-size: 12px;
        }
        #price {
            font-weight: bold;
            font-size: 20px;
        }
        .tags {
            margin-top: 12px;
            display: flex;
            overflow: hidden;
            align-items: center;
            flex-wrap: wrap;
        }
        .select-item {
            position: relative;
            height: 28px;
            line-height: 28px;
            border-radius: 12px;
            padding: 0 10px;
            border: 1px solid #FF9D1A;
            color: #FF9D1A;
            box-sizing: border-box;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .bgM{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;left: 0;right: 0;bottom: 0;
            z-index: 1000;
            background-color: rgba(0,0,0,0.85);
            overflow: hidden;
        }
        .bgM img{
            width: 100%;
            max-height:100%;
            position: absolute;
            top: 0;left: 0;right: 0;bottom: 0;
            z-index: 1001;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="content">
        <div id="mgq">
            <div>
                <div class="swiper-container">
                    <div class="swiper-wrapper" id="swiper-img"></div>
                    <div class="pagination"></div>
                </div>
                <div class="flex-cont">
                    <div class="flex price-cont">
                        <!-- <div id="q4"></div> -->
                        <div>
                            <span id="currency_name" style="min-width: 8px;display: inline-block;"></span>
                            <span id="price"></span>
                        </div>
                    </div>
                    <div class="flex">
                        <!-- <div id="q1"></div> -->
                        <div id="product_name"></div>
                    </div>
                    <div class="flex">
                        <!-- <div id="q2"></div> -->
                        <div id="description"></div>
                    </div>
                    <!-- <div class="tags" id="tagsList"></div> -->
                    <div class="tab2">
                        <div class="flex">
                            <div id="q3"></div>
                            <div id="item_number"></div>
                        </div>
                        <div class="flex">
                            <div id="q16"></div>
                            <div id="hs_code"></div>
                        </div>
                    </div>
                    <div class="tab2">
                        <div class="flex">
                            <div id="q6"></div>
                            <div id="unit_name"></div>
                        </div>
                        <div class="flex">
                            <div id="q7"></div>
                            <div id="packing_qty"></div>
                        </div>
                        <div class="flex">
                            <div id="q8"></div>
                            <div id="inner_packing"></div>
                        </div>
                        <div class="flex">
                            <div id="q9"></div>
                            <div>
                                <span>L:</span>
                                <span id="packing_size_l"></span>
                                <span>W:</span>
                                <span id="packing_size_w"></span>
                                <span>H:</span>
                                <span id="packing_size_h"></span>
                            </div>
                        </div>
                        <div class="flex">
                            <div id="q10"></div>
                            <div><span id="packing_cbm"></span>m³</div>
                        </div>
                        <div class="flex">
                            <div id="q12"></div>
                            <div><span id="net_weight"></span>kg</div>
                        </div>
                        <div class="flex">
                            <div id="q11"></div>
                            <div><span id="gross_weight"></span>kg</div>
                        </div>
                        <div class="flex">
                            <div id="q5"></div>
                            <div id="moq"></div>
                        </div>
                    </div>
                    <div class="flex remark">
                        <div id="q13"></div>
                        <div id="remark"></div>
                    </div>
                </div>
                <div class="q17"><button id="q17" onclick="handleCopy()"></button></div>
            </div>
            <div id="mgq2">
                <div id="q14"></div>
                <div class="q15"><button id="q15" onclick="handleDown()"></button></div>
            </div>
        </div>
        <div id="gq">
            <img src="./img/gq.png" alt="">
            <p id="gq1"></p>
            <p id="gq2"></p>
        </div>
    </div>
    <script src="./src/jquery-1.10.1.min.js"></script>
    <script src="./src/idangerous.swiper.min.js"></script>
    <script>
        let productInfo = '';
        let copySeccess = '';
        // const BASE_URL_REQUEST = 'https://api.luleme.czmb.tech/v1'; // 测试服
        const BASE_URL_REQUEST = 'https://api.lulemeapp.com/v1'; // 正式服
        let isCn = true;
        const langList = {
            cn: {
                q1: "产品名称",
                q2: "产品描述",
                q3: "货号",
                q4: "价格",
                q5: "最小起订量",
                q6: "单位",
                q7: "包装数量",
                q8: "内包装",
                q9: "包装尺寸(cm)",
                q10: "体积(m³)",
                q11: "毛重",
                q12: "净重",
                q13: "备注",
                q14: "来自lulemeapp的产品共享链接",
                q15: "加入lulemeapp",
                q16: "海关编码",
                q17: "复制产品信息",
            },
            en: {
                q1: "Product Name",
                q2: "Description",
                q3: "Item Number",
                q4: "Price",
                q5: "MOQ",
                q6: "Unit",
                q7: "Packing QTY",
                q8: "Inner Packing",
                q9: "Packing Size(cm)",
                q10: "CBM(m³)",
                q11: "Gross Weight",
                q12: "Net Weight",
                q13: "Remark",
                q14: "Product sharing link from lulemeapp",
                q15: "Join the trading community of lulemeapp",
                q16: "HS Code",
                q17: "Copy",
            }
        }
        function imgpre(e) {
            var temp = e.getAttribute('data-img');
            var objE = document.createElement("div");
            objE.innerHTML = '<div class="bgM" >' +
                    '<img src="'+temp+'" id="img_scan" class="img-custom-img2"/>' +
                '</div>';
            document.body.appendChild(objE.children[0]);
            //退出图片预览事件
            var $bg = document.querySelector(".bgM");
            $bg.onclick = function() {
                var dm = document.querySelector(".bgM");
                document.body.removeChild(dm);
            }
            //阻止事件冒泡
            var $img = document.querySelector(".img-custom-img2");
                $img.onclick = function(event) {
                event.stopPropagation();
            }
        }
        function getCurrency(id,name) {
            $.post(BASE_URL_REQUEST + '/api/config/currency/list', { page: 1,size: 999 }, function(res){
                if (res.code == 200) {
                    const currency = res.data.data.find(i => i.id ==id)
                    if (currency) {
                        $("#currency_name").text(currency.currency_symbol);
                    } else {
                        $("#currency_name").text(name);
                    }
                }
            },"json")
        }
        function randomString(len, type) {
            let lens = len || 16
            let chars = '0123456789abcdeoxmnl0123456789'
            let maxPos = chars.length
            let pwd = ''
            for (let i = 0; i < lens; i++) {
                pwd += chars.charAt(Math.floor(Math.random() * maxPos))
            }
            return pwd
        }
        window.onload = function () {
            let share_id = window.location.href.slice(window.location.href.indexOf("share_id") + 9)
            if (share_id && !isNaN(share_id)) {
                $.post(BASE_URL_REQUEST + '/api/client/product/share/link/info', { share_id: share_id }, function(res){
                    if (res.code == 200) {
                        const langCode = res.data.langCode;
                        const product = res.data.product;
                        productInfo = JSON.parse(JSON.stringify(product));
                        // console.log(langCode);
                        // console.log(product);
                        const product_pics = product.product_pics ? product.product_pics.split(",") : [];
                        let swiperHtml = "";
                        let tagsHtml = "";
                        product_pics.forEach(i => {
                            swiperHtml += `
                            <div class="swiper-slide">
                                <img onClick="imgpre(this)" data-img="${i}" src="${i}" alt="">
                            </div>
                            `
                        })
                        if (product.tags) {
                            product.tags.forEach(i => {
                                tagsHtml += `<div class="select-item">${i.tag_name}</div>`
                            })
                        }
                        // $("#tagsList").html(tagsHtml)
                        $("#swiper-img").html(swiperHtml)
                        
                        var mySwiper = new Swiper('.swiper-container', {
                            pagination: '.pagination',
                            autoplay: 3000, //可选选项，自动滑动
                            autoplayDisableOnInteraction : false,
                            loop: true, //可选选项，开启循环
                            paginationClickable: true
                        })
                        $("#mgq").css("opacity", "1");
                        for(const key in product) {
                            if(key != 'currency_name' && $("#" + key).length) {
                                $("#" + key).text(product[key] || "-") 
                            }
                        }
                        if (langCode == 'cn') {
                            isCn = true;
                            for(const key in langList.cn) {
                                if($("#" + key).length) {
                                    $("#" + key).text(langList.cn[key] || "-") 
                                }
                            }
                            copySeccess = '产品信息已复制'
                        } else {
                            isCn = false;
                            for(const key in langList.en) {
                                if($("#" + key).length) {
                                    $("#" + key).text(langList.en[key] || "-") 
                                }
                            }
                            copySeccess = 'Product information has been copied'
                        }
                        if (product.currency_id) {
                            getCurrency(product.currency_id,product.currency_name);
                        }
                    } else {
                        $("#gq1").text(res.message.cn || "-");
                        $("#gq2").text(res.message.en || "-");
                        $("#mgq").hide();
                        $("#gq").show();
                    }
                },"json")
            }
            // 以下仅为测试
            // const params = {
            //     cids: ['0df62cb42209a546488fdde9f62861ed', '07000d16fd5045f2e36c0cc87659a313'],
            //     title: '1',
            //     content: '1',
            //     // data: {
            //     //     text: '请进app查看',
            //     //     page: '/index'
            //     // },
            //     badge: 0,
            //     options: {
            //         android: {
            //             "XM": {
            //                 "/extra.channel_id": "129625" // 小米消息推送渠道ID
            //             },
            //             "XMG": {
            //                 "/extra.channel_id": "129625" // 小米消息推送渠道ID
            //             }
            //         }
            //     },
            //     force_notification: false, // 无论是离线推送还是在线推送，都自创建通知栏消息。HBuilderX 3.5.2 及其以上版本的客户端支持
            //     request_id: randomString(16),
            //     platform: 'ALL'
            // }
            // $.ajax({
            //     url: 'https://env-00jxho15nhol.dev-hz.cloudbasefunction.cn/lulemepush',
            //     type: 'POST',
            //     data: JSON.stringify(params),
            //     contentType: 'application/json;charset=UTF-8',
            //     dataType: 'json',
            //     timeout: 30000,
            //     success(res) {
            //         console.log(JSON.parse(res));
            //     },
            //     error(err) {
            //         console.log(err);
            //     }
            // })
        }
        function isIOS() {
            return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
        }
        
        function isAndroid() {
            return /android/i.test(navigator.userAgent);
        }
        function downloadHref(show) {
            const downloadUrl = "https://api.lulemeapp.com/v1/api/download/android";
            const link = document.createElement("a");
            link.style.display = "none";
            link.href = downloadUrl;
            link.download = "luleme" //下载的文件名
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
        function handleDown() {
            var ua = navigator.userAgent.toLowerCase();
            // alert(`${ua.match(/MicroMessenger/i) == "micromessenger"},${isIOS()},${isAndroid()}`)
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                // 在微信中打开-打开应用宝
                alert(isCn ? "请在浏览器中打开" : "Please open it in your browser")
            } else if (isIOS()) {
                // IOS打开
                window.open("https://itunes.apple.com/us/app/id6479940483", "_self");
            } else if (isAndroid()) {
                // 安卓打开
                window.open("market://details?id=luleme.com", "_self");
            } else {
                // 其它地方打开
                downloadHref();
            }
        }
        function handleCopy() {
            const copyPro = {
                currency_id: productInfo.currency_id || '',
                currency_name: productInfo.currency_name || '',
                description: productInfo.description || '',
                gross_weight: productInfo.gross_weight || '',
                hs_code: productInfo.hs_code || '',
                inner_packing: productInfo.inner_packing || '',
                item_number: productInfo.item_number || '',
                moq: productInfo.moq || '',
                net_weight: productInfo.net_weight || '',
                packing_cbm: productInfo.packing_cbm || '',
                packing_qty: productInfo.packing_qty || '',
                packing_size_h: productInfo.packing_size_h || '',
                packing_size_l: productInfo.packing_size_l || '',
                packing_size_w: productInfo.packing_size_w || '',
                price: productInfo.price || '',
                product_name: productInfo.product_name || '',
                product_pics: productInfo.product_pics || '',
                remark: productInfo.remark || '',
                unit_abbreviation: productInfo.unit_abbreviation || '',
                unit_id: productInfo.unit_id || '',
                unit_name: productInfo.unit_name || '',
            }
            const text = JSON.stringify(copyPro);
            if(navigator.clipboard && navigator.clipboard.writeText){
                navigator.clipboard.writeText(text).then(() => {
                    alert(copySeccess);
                });
            }else{
                let oInput = document.createElement('input');
                oInput.value = text;
                document.body.appendChild(oInput);
                oInput.select(); // 选择对象
                document.execCommand("Copy"); // 执行浏览器复制命令
                oInput.className = 'oInput';
                oInput.style.display='none';
                alert(copySeccess);
            }
        }
    </script>
</body>
</html>